<template>
    <view>
        <!--用户个人信息-->
        <UserProfile :name="userInfo?.nickName" intro="" @confirm="navChange"></UserProfile>
        <!--项目列表-->
        <a-card :bordered="false" class="header-solid h-full mb-24" :bodyStyle="{ paddingTop: '14px' }"
            v-show="navVal == '项目'">
            <template #title>
                <h6 class="font-semibold">项目列表</h6>
                <p>已获得授权资源列表</p>
            </template>
            <a-row type="flex" :gutter="24" align="stretch">
                <!-- Project Column -->
                <a-col :span="24" :md="12" :xl="6" v-for="(project, index) in projects" :key="index">
                    <ProjectCard :keyVal="project.id" :topTitle="project.category" :title="project.title"
                        :cover="project.cover" :subTitle="project.summary" :teams=[] @confirm="toDetail"></ProjectCard>
                </a-col>
            </a-row>
        </a-card>
        <view v-show="navVal == '总览'">
            <el-card class="box-card" v-if="customerOrders?.length != 0">
                <template #header>
                    <div class="card-header">
                        <span>顾客订单</span>

                    </div>
                </template>
                <el-table :data="customerOrders" >
                    <el-table-column label="订单编号" align="center" width="200" prop="id" />
                    <el-table-column label="订单名称" align="center" prop="orderName" />
                    <el-table-column label="订单类型" align="center" prop="orderType" />
                    <el-table-column label="客户" align="center" prop="customerName" />
                    <el-table-column label="完成人" align="center" prop="producerName" />
                    <el-table-column label="订单总额" align="center" prop="amount" />
                    <el-table-column label="已付金额" align="center" prop="receivedAmount">

                    </el-table-column>
                    <el-table-column label="备注" :show-overflow-tooltip="true" align="center" prop="remark" />
                    <el-table-column label="状态" align="center" prop="status">
                        <template #default="scope">
                            <el-switch :disabled="!isAdmin" v-model="scope.row.status" :active-value="1" :inactive-value="0"
                                @change="handleStatusChange(scope.row)"></el-switch>
                        </template>
                    </el-table-column>
                    <el-table-column label="操作" width="200" align="center" class-name="small-padding fixed-width">
                        <template #default="scope">
                            <el-button type="text" icon="View" @click="viewProcess(scope.row)">查看进度</el-button>
                        </template>
                    </el-table-column>
                </el-table>
            </el-card>
            <el-card class="box-card" v-if="myOrders?.length != 0">
                <template #header>
                    <div class="card-header">
                        <span>我的订单</span>

                    </div>
                </template>
                <el-table :data="myOrders">
                    <el-table-column label="订单编号" align="center" width="200" prop="id" />
                    <el-table-column label="订单名称" align="center" prop="orderName" />
                    <el-table-column label="订单类型" align="center" prop="orderType" />
                    <el-table-column label="客户" align="center" prop="customerName" />
                    <el-table-column label="完成人" align="center" prop="producerName" />
                    <el-table-column label="订单总额" align="center" prop="amount" />
                    <el-table-column label="已付金额" align="center" prop="receivedAmount">

                    </el-table-column>
                    <el-table-column label="备注" :show-overflow-tooltip="true" align="center" prop="remark" />
                    <el-table-column label="状态" align="center" prop="status">
                        <template #default="scope">
                            <el-switch :disabled="!isAdmin" v-model="scope.row.status" :active-value="1" :inactive-value="0"
                                @change="handleStatusChange(scope.row)"></el-switch>
                        </template>
                    </el-table-column>
                    <el-table-column label="操作" width="200" align="center" class-name="small-padding fixed-width">
                        <template #default="scope">
                            <el-button type="text" icon="View" @click="viewProcess(scope.row)">查看进度</el-button>
                        </template>
                    </el-table-column>
                </el-table>
            </el-card>
        </view>
    </view>
</template>
<script setup>
import request from '@/utils/request';
import useApp from '@/hooks';
const { $, proxy } = useApp();
import { queryGrant } from '@/custom/pms/api/project';
import { queryList } from '@/custom/pms/api/order';
import useUserStore from '@/store/modules/user';
const userStore = useUserStore();
const userInfo = ref(null);
// 项目列表
const projects = ref([]);
const navVal = ref("总览")
// 修改
function navChange(e) {
    navVal.value = e;
}
// 查看详细
function toDetail(e) {
    console.log(e)
    $.navigateTo({
        url: '/pms/project/preview/' + e
    })
}
function buildProfile() {
    userStore.getProfile().then(res => {
        userInfo.value = res;
    })
}
buildProfile();
// 查询 Grant
function queryProjects() {
    queryGrant({
        userId: userStore.userId
    }).then(res => {
        console.log(res)
        const projectIds = res.map(ele => { return ele.projectId; });
        console.log(projectIds)
        request({
            url: '/pms/projects?idList=' + projectIds,
            method: 'get',

        }).then(r => {
            console.log(r)
            projects.value = r;
        })
    })
}
// 登录用户作为顾客的订单
const myOrders = ref([])
function queryMyOrders() {
    queryList({
        pageSize: 100,
        pageNum: 1,
        customerId:userStore.userId
    }).then(res => {
        console.log(res)
        myOrders.value = res.content;
    })
}
const customerOrders = ref([])
// 查询顾客订单列表（写手）
function queryCustomerOrders() {
    queryList({
        pageSize: 100,
        pageNum: 1,
        producerId:userStore.userId
    }).then(res => {
        console.log(res)
        customerOrders.value = res.content;
    })
}

function viewProcess(row) {
    console.log(row.id)
    // selectedOrder.value = row;
    // proxy.$refs['processRef'].show();
    // proxy.$refs['processRef'].processQuery(row.id);
    $.navigateTo({
        url:'/pms/order/' + row.id
    })
}
queryCustomerOrders();
queryMyOrders();
queryProjects();

</script>
<style lang="scss" scoped>
@import '@/scss/muse.scss';
</style>